<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简易网页时钟</title>
    <style>
    body,
    div {
        margin: 0;
        padding: 0;
    }
    
    body {
        color: #fff;
        font: 16px/1.5 \5fae\8f6f\96c5\9ed1;
    }
    
    #clock {
        width: 300px;
        text-align: center;
        background: #1a1a1a;
        margin: 10px auto;
        padding: 20px 0;
    }
    
    span {
        color: #000;
        width: 80px;
        line-height: 2;
        background: #fbfbfb;
        border: 2px solid #b4b4b4;
        margin: 0 10px;
        padding: 0 10px;
    }
    </style>
    <script>
    window.onload = function() {
        var oClock = document.getElementById("clock");
        var aSpan = oClock.getElementsByTagName("span");

        setInterval(getTimes, 1000);
        getTimes();

        function getTimes() {
            var oDate = new Date();
            var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];
            for (var i in aDate) aSpan[i].innerHTML = format(aDate[i])
        }

        function format(a) {
            return a.toString().replace(/^(\d)$/, "0$1")
        }
    }
    </script>
</head>

<body>
    <div id="clock">
        <span></span>点<span></span>分<span></span>秒
    </div>
</body>

</html>
